{%- liquid
  if column == 2
    assign overlay_padding = 'px-3 px-md-6 py-4'
    assign img_sizes = '(min-width: 1440px) 956px, (min-width: 1280px) 704px, (min-width: 1152px) 620px, (min-width: 768px) 500px, (min-width: 576px) 100vw, calc(100vw - 32px)'
  else
    assign overlay_padding = 'px-3 px-md-4 py-4'
    assign img_sizes = '(min-width: 1440px) 466px, (min-width: 1280px) 340px, (min-width: 1152px) 298px, (min-width: 768px) 242px, (min-width: 576px) 100vw, calc(100vw - 32px)'
  endif
  -%}
<div class="article-card card text-white border-0 h-100 overflow-hidden">
  <div class="figure-wrapper position-relative h-100">
    {%- if show_image == true and article.image -%}
      <figure class="ratio mb-0 h-100">
        <picture class="picture">
          <img srcset="
            {{ article.image.src | image_url: width: 350 }} 350w,
            {{ article.image.src | image_url: width: 390 }} 390w,
            {{ article.image.src | image_url: width: 420 }} 420w,
            {{ article.image.src | image_url: width: 480 }} 480w,
            {{ article.image.src | image_url: width: 550 }} 550w,
            {{ article.image.src | image_url: width: 700 }} 700w,
            {{ article.image.src | image_url: width: 780 }} 780w,
            {{ article.image.src | image_url: width: 840 }} 840w,
            {{ article.image.src | image_url: width: 1100 }} 1100w,
            {{ article.image.src | image_url: width: 1400 }} 1400w"
            src="{{ article.image.src | image_url }}"
            sizes="{{ img_sizes }}"
            alt="{{ article.image.src.alt | escape }}"
            width="{{ article.image.width }}"
            height="{{ article.image.height }}"
            loading="lazy"
            class="w-100 h-100 object-fit-cover"
          >
        </picture>
      </figure>
    {%- else -%}
    <figure class="ratio mb-0 h-100 bg-black" style="--se-bg-opacity: .6;"></figure>
    {%- endif -%}
  </div>

  <div class="card-img-overlay mb-n2 {{ overlay_padding }}">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when 'title'-%}
          <div class="fs-footnote gray-300 {% if block.settings.show_author or block.settings.show_date or block.settings.show_tags and article.tags != blank %}mb-2{% endif %}" >
            {%- if block.settings.show_author -%}
              <span>{{ article.author -}}</span>
            {%- endif -%}
            {%- if block.settings.show_author and block.settings.show_date -%}
              <span class="px-2">·</span>
            {% endif %}
            {%- if block.settings.show_date -%}
              <span>{{- article.published_at | time_tag: format: 'date' -}}</span>
            {%- endif -%}
            {%- if block.settings.show_tags and article.tags != blank -%}
              {% if block.settings.show_author or block.settings.show_date %}
                <span class="px-2">·</span>
              {% endif %}
              {% for tag in article.tags %}
                <span>{{ tag }}{% if forloop.last == false %},{% endif %}</span>
              {% endfor %}
            {%- endif -%}
          </div>
          <h3 class="mb-2 fw-bold">
            {{ article.title | escape }}
          </h3>
            
        {%- when 'summary'-%}
          {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
            <p class="mb-2 ellipsis-2 small">
              {%- if article.excerpt.size > 0 -%}
                {{ article.excerpt | strip_html | truncatewords: 60 }}
              {%- else -%}
                {{ article.content | strip_html | truncatewords: 60 }}
              {%- endif -%}
            </p>
          {%- endif -%}
        {%- when 'link'-%}
      {%- endcase -%}
    {%- endfor -%}
  </div>

  <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
</div>